<template>
  <div>
    <!-- v-model是双向绑定不需要给方法里面传值 -->
    <input type="text" v-model="keywords">
    <button @click="getDataList()">查询</button>
    <div>
      <table border="1px solid #eee">
        <tr>
          <td>姓名</td>
          <td>手机</td>
          <td>住址</td>
        </tr>
        <!-- for循环要绑定key值 -->
        <tr v-for="item in list" :key="item.id">
          <td>{{item.recipients}}</td>
          <td>{{item.mobile}}</td>
          <td>{{item.detail}}</td>
        </tr>  
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    // 相同的字段要复制以防拼写错误，要注意字符串值和数字值的是否加引号的区分，空值时加引号，不是空值并且不是字符串不需要引号！！！
    return {
      'totalCount': 0,
      'pageSize': 10,
      'totalPage': 1,
      'currPage': 1,
      'list': [],
      'keywords': ''
    }
  },
  components: {

  },
  activated () {
    this.getDataList()
    this.add({
      'name': '小明',
      'age': 5
    })
  },
  // 请求参数的方法要在activated里调用
  // 在method里调用Data中的参数时要加上this,请求参数的每一个key+value 后面要加逗号，参数名要加单引号返回赋值的分号可以省略
  methods: {
    getDataList () {
      this.$http({
        // 请求的内容从后台给的链接里的链接和参数来请求
        url: this.$http.adornUrl('/sys/addr/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': 1,
          'limit': 10,
          'keywords': this.keywords // 需要请求的查询参数和后台给的链接里的参数一起请求，请求时加上参数值
        })
      }).then(({data}) => {
        console.log(data.msg)// 返回的内容是Data中除去请求的参数之外的未知的参数
        if (data && data.code === 0) { // 当返回的参数有值并且code===0时处理返回的值
          this.totalCount = data.page.totalCount
          this.totalPage = data.page.totalPage
          this.list = data.page.list// 注意返回参数的层级问题
        } else {
        }
      })
    },
    add (people) {
      var rs = people.name + '今年' + people.age + '岁'
      console.log(rs)
    }
  }
}
</script>
